<script>
    import goodsApi from '../../../src/api/goods';
    import albumApi from '../../../src/api/album';
    import storeApi from '../../../src/api/store';
    const data = {
        albumGroups : [],
        verify: {
            title: [
                {
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }, {
                    min: 0,
                    max: 50,
                    message: '名称不能超过50个字符',
                    trigger: 'blur'
                }
            ],
            introduce: [
                {
                    min: 0,
                    max: 50,
                    message: '描述不能超过200个字符',
                    trigger: 'blur'
                }
            ],
            album: [
                {
                    required: true,
                    message: '请选择默认商品相册',
                    trigger: 'blur'
                }
            ],
        },
        form : {
            title: '',
            introduce: '',
            defaultAlbum: 0
        }
    };

    export default {
        data() {
            albumApi.group.list({
                success(list) {
                    for(let i=0; i<list.length;i++)
                        data.albumGroups.push(list[i]);
                }
            });
            storeApi.info({
                success(result) {
                    data.form = result;
                }
            });
            return data;
        },
        methods: {
            submitForm(){
                self = this;
                storeApi.update(data.form,{
                    success() {
                        self.$message({
                            type: 'success',
                            message: '恭喜您，店铺信息已经更新成功',
                            duration : 1500
                        });
                    }
                });
            }
        }
    }
</script>

<template>
    <div class="content-box">
        <el-form :model="form" :rules="verify" ref="form" label-width="80px">
            <el-form-item label="店铺名称" prop="title">
                <el-input class="long" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="店铺简介" prop="introduce">
                <el-input
                        class="long"
                        type="textarea"
                        resize="none"
                        :rows="4"
                        v-model="form.introduce">
                </el-input>
            </el-form-item>
            <el-form-item label="默认上传" prop="album">
                <el-select v-model="form.defaultAlbum" class="short">
                    <el-option
                            v-for="item in albumGroups"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">保存修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped>
    .short{
        width: 200px;
    }
    .long{
        width: 600px;
    }
    .appendParam{
        width: 446px;
    }
    .content-box {
        padding: 30px 50px;
    }
    .content-box .album{
        padding: 0 15px 20px;
        min-height: 620px;
    }
</style>